<template>
  <div class="container">
    <!-- <div style="height: 10px"></div>
    <div class="head">
      <div style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 90%;
          margin-left: 5%;
        ">
        <div style="width: 40%; text-align: center">
          <picker mode="date" :value="date" :start="startDate" :end="endDate" fields="day" @change="bindDateChange">
            <input placeholder="点击选择开始时间" v-model="date" disabled type="text" />
          </picker>
        </div>
        <div style="width: 20%; text-align: center">至</div>
        <div style="width: 40%; text-align: center">
          <picker mode="date" :value="dates" :start="startDates" :end="endDates" fields="day" @change="bindDateChanges">
            <input placeholder="点击选择结束时间" disabled v-model="dates" type="text" />
          </picker>
        </div>
      </div>
    </div>
    <div style="height: 40px"></div> -->
    <div style="height: 20px;"></div>
    <div style="width: 95%;margin-left: 2.5%;background: #ffffff;border-radius: 10px;">
      <div style="height: 20px;"></div>
      <div @click="addMain" style="color: #000000;width: 90%;margin-left: 5%;display: flex;align-items: center;justify-content: space-between;">
          <div>新增工单任务</div>
          <div class="addBtn">新增</div>
      </div>
      <div style="height: 20px;"></div>
    </div>
    <div style="height: 10px;"></div>
    <!-- 内容切换 -->
    <div v-if="list.length == 0">
      <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
      </u-empty>
    </div>
    <div v-if="indent === '巡检'" class="card" v-for="item in list" @click="taskDetail(item)">
      <div style="height: 10px"></div>
      <div class="card-top">
        <div style=" text-align: center;font-size: 18px;font-weight: 500;">{{ item.repairMaintainNo ?? item.inspectNo ?? item.safetyTrainNo }}</div>
        <div v-show="indent == '维保'"  style="width: 20%; text-align: center;border-radius: 4px;">
          <image style="width: 110rpx;height: 60rpx;" :src="item.repairMaintainOrderState === 0?'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202370.png':'https://28-1325662301.cos.ap-shanghai.myqcloud.com/%E9%9D%92%E5%B2%9B%E5%B0%8F%E7%A8%8B%E5%BA%8F%2FGroup%202371.png'" />
        </div>
      </div>
      <div style="height: 10px"></div>
      <u-line color="#83AF92"></u-line>
      <div style="height: 10px"></div>
      <div class="newFlex">
        <div>发单日期</div>
        <div>{{ item.launchTime??item.createTime }}</div>
      </div>
      <div style="height: 15px;"></div>
      <div class="newFlex" v-show="indent != '知识库'">
        <div>接单人员</div>
        <div>{{ item.userName ?? item.orderPersonName }}</div>
      </div>
      <div style="height: 15px;"></div>
      <div class="newFlex" v-show="indent != '知识库'">
        <div>手机号码</div>
        <div>{{ item.phonenumber ?? item.phoneNumber }}</div>
      </div>
      <div style="height: 15px;" v-show="indent == '维保'"></div>
      <div class="newFlex" v-show="indent == '维保'">
        <div>设备编号</div>
        <div>{{ item.repairMaintainNo }}</div>
      </div>
      <div style="height: 15px;" v-show="indent == '巡检'"></div>
      <div class="newFlex" v-show="indent == '巡检'">
        <div>巡检对象</div>
        <div>{{ item.inspectName }}</div>
      </div>
      <div style="height: 15px;"></div>
      <div class="items" v-show="indent == '知识库'">
        <div>试卷：{{ item.paperName }}</div>
        <div>合格分数：{{ item.scoreLine }}</div>
      </div>
      <div class="items" v-show="indent == '知识库'">
        <div style="font-size: 14px;">限时：{{ item.startTime }}-{{ item.endTime }}</div>
      </div>
      <div v-show="indent == '巡检'" :class="item.workOrderState == 2 ? 'status' : 'status1'">
        <!-- {{ item.workOrderState == 2 ? "进行中" : item.workOrderState==3?'已完成':'' }} -->
        {{ item.workOrderState == 1 ? "待接单" : item.workOrderState == 2 ? '进行中' : item.workOrderState == 3 ? '已完成' : "" }}
      </div>
      <div v-show="indent == '知识库'" class="status">
        完成进度：{{ item.completedPersonNum }} / {{ item.predictPersonNum }}
      </div>
    </div>
    <div class="card" v-if="indent == '知识库'" v-for="item in list">
      <div style="height: 10px"></div>
      <div class="card-top">
        <div style=" text-align: center;font-size: 18px;font-weight: 500;">{{ item.safetyTrainNo }}</div>
      </div>
      <div style="height: 10px"></div>
      <u-line color="#83AF92"></u-line>
      <div style="height: 10px"></div>
      <div class="items">
        <div>试卷名称</div>
        <div>{{ item.paperName }}</div>
      </div>
      <div style="height: 10px"></div>
      <div class="items">
        <div>合格分数</div>
        <div>{{ item.scoreLine }}</div>
      </div>
      <div style="height: 10px"></div>
      <div class="items">
        <div>开始时间</div>
        <div>{{ item.startTime }}</div>
      </div>
      <div style="height: 10px"></div>
      <div class="items">
        <div>结束时间</div>
        <div>{{ item.endTime }}</div>
      </div>
      <div style="height: 15px"></div>
    </div>
    <div style="height: 3vh;"></div>
  </div>
</template>
<script>
import { mainList, insList, knowList } from '../api/api.js';
export default {
  data() {
    return {
      date: '',
      dates: '',
      indent: '',
      startTime: '',
      endTime: '',
      list: [],
      remark: ''
    };
  },
  methods: {
    //新增
    addMain(){
      uni.navigateTo({ url: `/pagesPlant/index/addmain?id=2` })
    },
    bindDateChange: function (e) {
      //选择日期
      this.date = e.detail.value;
      console.log("date", this.date);

      if (this.indent == '维保') {
        this.wList();
      } else if (this.indent == '巡检') {
        this.xList();
      } else if (this.indent == '知识库') {
        this.zList();
      }
    },
    bindDateChanges: function (e) {
      //选择日期
      this.dates = e.detail.value;
      console.log("date", this.date);
      if (this.indent == '维保') {
        this.wList();
      } else if (this.indent == '巡检') {
        this.xList();
      } else if (this.indent == '知识库') {
        console.log(12234);
        this.zList();
      }
    },
    getDate(type) {
      //年月日
      const date = new Date();
      // const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
    taskDetail(item) {
      // uni.setStorageSync('mainDetail', item)
      // uni.navigateTo({ url: '/pagesPlant/index/maindetail' })
    },
    wList() {
      mainList({
        repairMaintainState: 1,
        beginTime: this.date,
        endTime: this.dates,
        type: 1
      }).then(res => {
        if (res.data.code == 200) {
          console.log(res.data.rows, 'res');
          // 使用 map 方法进行数据转换
          this.list = res.data.rows.map(item => ({
            id: item.repairMaintainTask.id,
            phoneNumber: item.phonenumber,
            userName: item.repairMaintainTask.userName,
            launchTime: item.repairMaintainTask.launchTime,
            repairMaintainNo: item.repairMaintainTask.repairMaintainNo,
            repairMaintainOrderState: item.repairMaintainTask.repairMaintainOrderState,
            repairMaintainState: item.repairMaintainTask.repairMaintainState,
            repairMaintainType: item.repairMaintainTask.repairMaintainType,
            deptName: item.repairMaintainTask.deptName,
            deptId: item.repairMaintainTask.deptId,
            deviceNo: item.repairMaintainTask.deviceNo,
            taskDesc: item.repairMaintainTask.taskDesc,
            deviceSate: item.repairMaintainTask.deviceSate,
            // faultType:item.repairMaintainTask.faultType,
            faultType: item.repairMaintainTask.faultType,
            emerDegree: item.repairMaintainTask.emerDegree,
            deviceName: item.repairMaintainTask.deviceName,
          }));
          console.log(this.list, 'list');
        }
      })
    },
    xList() {
      insList({
        workOrderState: 2,
        beginTime: this.date,
        endTime: this.dates,
        type: 1
      }).then(res => {
        console.log(res.data, '巡检工单');
        this.list = res.data.data;
      })
    },
    zList() {
      console.log(this.date, this.dates, '666');
      knowList({
        beginTime: this.date,
        endTime: this.dates,
        // beginTime: '',
        // endTime: '',
      }).then(res => {
        console.log(res.data, '知识库');
        if (res.data.code == 200) {
          this.list = res.data.data.filter((item)=>item.completedPersonNum !=item.predictPersonNum);
        }
      })
    }
  },
  onLoad() { },
  onShow() {
    this.indent = uni.getStorageSync('pageIndent');
    this.remark = uni.getStorageSync('userInfo').remark;
    let taskFlag = uni.getStorageSync('taskFlag');
    if (this.indent == '巡检') {
      uni.setNavigationBarTitle({
        title: '巡检进行中任务'
      });
      this.xList();
    } else if (this.indent == '维保') {
      uni.setNavigationBarTitle({
        title: '维保进行中任务'
      });
      this.wList();
    } else if (this.indent == '知识库') {
      uni.setNavigationBarTitle({
        title: '考试进行中任务'
      });
      this.zList();
    }
  }
};
</script>
<style lang="scss">
.container {
  height: 100vh;
  width: 100vw;
  background: #f3f3f3;
  color: #000000;
  overflow-y: scroll;
}
.newFlex{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin-left: 5%;
}
.card {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 10px;
  border-radius: 10px;
  background: #ffffff;

  .card-top {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-left: 5%;
  }
}

.items {
  display: flex;
  align-items: center;
  width: 90%;
  margin-left: 5%;
  justify-content: space-between;
  font-size: 14px;
}

.table {
  width: 90%;
  margin-left: 5%;
}

.status {
  color: #fff;
  background: #000000;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  border-radius: 3px;
}

.status1 {
  color: #000000;
  background: gray;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  border-radius: 3px;
}

.right {
  background: #FDBD18;
  color: #fff;

}

.right1 {
  background: #50AB18;
  color: #fff;
}

.head {
  display: flex;
  align-items: center;
  height: 50px;
  background: #000000;
  color: #fff;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 9999;
}

.btn {
  display: flex;
  align-items: center;
  background: #1B9C46;
  color: #fff;
  border-radius: 7px;
  height: 75rpx;
  justify-content: center;
  position: absolute;
  width: 100px;
  z-index: 9999;
  bottom: 10%;
  right: 10px;
  font-size: 17px;
}

.btnRound {
  width: 90%;
  margin-left: 5%;
  display: flex;
  justify-content: space-between;
}
.addBtn{
  width: 120rpx;
  height: 65rpx;
  background-color: #000000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
}
</style>